<template>
  <div class='box'>
    <Headers></Headers>
    <mainswiper></mainswiper>
    <h3 class='index-title'>推荐商家</h3>
    <shoplist></shoplist>
    <Footers></Footers>
    <div class="backtop-wrapper">
      <svg class="BackTop-icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#back-top.7a234e5">
          <svg viewBox="0 0 1024 1024" id="back-top.7a234e5" class="icon" width="100%" height="100%">
            <path d="M109.078 75.5h805.846v134.308H109.076s0-134.308.002-134.308zm805.846 604.384H713.462V948.5H310.538V679.884H109.076L512 276.962l402.924 402.922z"></path>
          </svg>
        </use>
      </svg>
    </div>
  </div>
</template>

<script>
// import { mapState } from 'Vuex'
import mainswiper from './mainSwiper'
import shoplist from './ShopList';
import Headers from './Header';
import Footers from './Footer';

export default {
  name: 'home',
  data() {
    return {

    }
  },
  components: { mainswiper, shoplist, Headers, Footers }
}
</script>

<style scoped lang='scss'>
@import '../../static/hotcss/px2rem.scss';
.box {
  background-color: #f5f5f5;
  .index-title {
    margin-top: px2rem(10);
    line-height: px2rem(35);
    font-weight: 600;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    padding-left: px2rem(15);
  }
  .backtop-wrapper {
    position: fixed;
    right: px2rem(15);
    bottom: px2rem(80);
    display: flex;
    align-items: center;
    justify-content: center;
    width: px2rem(42);
    height: px2rem(42);
    border: 1px solid #999;
    border-radius: 50%;
    background-color: #fff;
    transition: opacity .3s;
    .BackTop-icon {
      display: block;
      width: px2rem(20);
      height: px2rem(20);
      fill: #999;
    }
  }
}
</style>
